<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <script src="./bootstrap/js/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>

    <style>
        a,
        a:hover {
            text-decoration: none;
            color: #333;
        }

        .movie-list {
            margin-top: 80px;
            margin-bottom: 30px;

        }

        .movie-list .col-lg-3 {
            margin: 10px auto;
            text-align: center;
        }

        .movie-list .col-lg-3>div.thumbnail {
            height: 400px;
            box-shadow: 0px 2px 2px 2px #EEE;
        }

        .movie-list .col-lg-3 img {
            width: 100%;
            height: 300px;
        }

        /* 底部 */
        .footer {
            padding-top: 20px;
            padding-bottom: 20px;
            text-align: center;
            color: #DDD;
            background-color: #151E29;
            line-height: 30px;
        }
    </style>
    <!-- 电影素材来自豆瓣 https://movie.douban.com/ -->
</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">青鸟大电影</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">正在热映 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">TOP250</a></li>
                    <li><a href="#">欧美大片</a></li>
                    <li><a href="#">日韩电影</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./reg.html">注册</a></li>
                    <li><a href="./login.html">登录</a></li>
                    <li><a href="./ucenter.html">个人中心</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container movie-list">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <a href="./detail.html">
                        <img src="./uploads/01.png" alt="">
                        <h4>清平乐</h4>
                        <div>
                            <span class="label label-success">剧情</span>
                            <span class="label label-success">惊悚</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <a href="./detail.html">
                        <img src="./uploads/02.png" alt="">
                        <h4>龙岭迷窟</h4>
                        <div>
                            <span class="label label-success">剧情</span>
                            <span class="label label-success">惊悚</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/03.png" alt="">
                    <h4>猎狐</h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/04.png" alt="">
                    <h4>下探闻不知</h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/05.png" alt="">
                    <h4>我是余欢水</h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/06.png" alt="">
                    <h4>法定丈夫</h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/07.png" alt="">
                    <h4>The King</h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/08.png" alt="">
                    <h4>夫妻的世界</h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/09.png" alt="">
                    <h4>杀死伊芙 第三季 Killing Eve Season 3</h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/10.png" alt="">
                    <h4>机智医生生活</h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/11.png" alt="">
                    <h4>鬓边不是海棠红 </h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="./uploads/12.png" alt="">
                    <h4>民国奇案</h4>
                    <div>
                        <span class="label label-success">剧情</span>
                        <span class="label label-success">惊悚</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid footer">
        <div class="row">
            <div class="col-lg-12">
                Copyright 2019 by www.braccp.com 北京畅想唯优信息技术有限公司 All rights reserved.
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                联系电话：029-88212666 地址：西安市雁塔区电子一路 石油大学北门工会楼二层
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                备案号：陕ICP备19013769号-1
            </div>
        </div>
    </div>
</body>

</html>